<template>
  <div class="qingwu">
    <div class="admin_main_block">
      <div class="admin_main_block_top">
        <div class="admin_main_block_left">
          <div>广告编辑</div>
        </div>

        <div class="admin_main_block_right">
          <div>
            <el-button icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
          </div>
        </div>
      </div>

      <div class="admin_form_main">
        <el-form label-width="150px" ref="info" :model="info">
          <el-form-item
            label="广告位"
            prop="ap_id"
            :rules="[{required:true,message:'请选项广告位',trigger: 'change' }]"
          >
            <el-select v-model="info.ap_id" placeholder="请选择广告位" @change="selectChange()">
              <!-- <el-option label="请选择广告位" :value="0"></el-option> -->
              <el-option v-for="v in list" :label="v.ap_name" :key="v.id" :value="v.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="广告名"
            prop="adv_title"
            :rules="[{required:true,message:'广告名不能为空',trigger: 'blur' }]"
          >
            <el-input placeholder="请输入内容" v-model="info.adv_title"></el-input>
          </el-form-item>
          <el-form-item
            label="Ios平台显示"
            prop="is_ios"
            :rules="[{required:true,message:'请选择Ios平台是否显示',trigger: 'change' }]"
          >
            <el-radio-group v-model="info.is_ios">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="Android平台显示 "
            prop="is_android"
            :rules="[{required:true,message:'请选择Android平台是否显示',trigger: 'change' }]"
          >
            <el-radio-group v-model="info.is_android">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="广告类型"
            prop="adv_type"
            :rules="[{required:true,message:'请选择广告类型',trigger: 'change' }]"
          >
            <el-select v-model="info.adv_type" placeholder="请选择广告类型" @change="get_type_data">
              <!-- <el-option label="请选择广告类型" :value="0"></el-option> -->
              <el-option v-for="v in type_option" :label="v.name" :key="v.id" :value="v.id"></el-option>
            </el-select>
          </el-form-item>
          <div v-if="info.adv_type != 6 && info.adv_type != 0">
            <el-form-item
              v-if="info.adv_type == 5"
              label="广告链接"
              prop="adv_link"
              :rules="[{required:true,message:' ',trigger: 'blur' }]"
            >
              <el-input placeholder="请输入内容" v-model="info.adv_link"></el-input>
            </el-form-item>
            <el-form-item
              v-else
              label="广告链接"
              prop="ids"
              :rules="[{required:true,message:' ',trigger: 'change' }]"
            >
              <el-select v-model="info.ids" placeholder="请选择跳转地址">
                <el-option v-for="v in type_data" :label="v.name" :key="v.id" :value="v.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="开始时间">
            <el-date-picker
              format="yyyy-MM-dd HH:mm"
              v-model="info.adv_date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="排序" prop="adv_sort">
            <el-input placeholder="请输入内容" type="number" v-model="info.adv_sort"></el-input>
          </el-form-item>
          <el-form-item label="添加展示图" prop="adv_image" :rules="[{required:true,message:'请添加展示图' }]">
            <el-upload
              class="avatar-uploader"
              :action="$api.advUpload"
              :headers="upload_headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="info.adv_image" :src="info.adv_image" class="avatar-upload" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('info')">提交</el-button>
            <el-button @click="resetForm('info')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      edit_id: 0,
      info: {
        adv_sort: 0,
        adv_type: "",
        ap_id: "",
        is_ios: "",
        is_android: "",
        adv_link: "",
        ids: "",
      },
      list: [],
      type_option: [],
      type_data: [],
      upload_headers: {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    resetForm: function (e) {
      this.$refs[e].resetFields();
    },
    submitForm: function (e) {
      let _this = this;

      // 验证表单
      this.$refs[e].validate(function (res) {
        if (res) {
          //  判断是Add 或者 Edit
          let url = _this.$api.addAdv;
          let isEdit = false;
          if (_this.edit_id > 0) {
            isEdit = true;
            url = _this.$api.editAdv + _this.edit_id;
          }
          // 兼容上传图片地址
          if (typeof _this.info.adv_image == "string")
            _this.$set(_this.info, "adv_image", [_this.info.adv_image]);
          // Http 请求
          _this.$post(url, _this.info).then(function (res) {
            if (res.code == 200) {
              _this.$message.success(isEdit ? "编辑成功" : "添加成功");
              _this.$router.go(-1);
            } else {
              _this.$message.error(isEdit ? "编辑失败" : "添加失败");
            }
          });
        }
      });
    },
    get_adv_info: function () {
      let _this = this;
      this.$get(this.$api.editAdv + this.edit_id).then(function (res) {
        _this.info = res.data;
        // 将ids做一个Select兼容处理。
        _this.$set(_this.info,"ids",+_this.info.ids.split(','))
        _this.type_option = res.data.type_option;
        if (_this.info.adv_type) {
          _this.get_type_data();
        }
        _this.list = res.data.list;
      });
    },
    get_adv_list: function () {
      let _this = this;
      this.$get(this.$api.addAdv).then(function (res) {
        _this.list = res.data.adv_position;
        _this.type_option = res.data.type_option;
      });
    },
    // 获取项目
    get_type_data() {
      this.$set(this.info, "id", "");
      this.$get(this.$api.getAdvTypeData, { type: this.info.adv_type }).then(
        (res) => {
          if (res.code == 200) this.type_data = res.data;
          else this.$message.error(res.msg);
        }
      );
    },
    selectChange: function () {
      this.$forceUpdate();
    },
    handleAvatarSuccess(res) {
      this.info.adv_image = res.data;
      this.$forceUpdate();
    },
  },
  created() {
    this.upload_headers.Authorization =
      "Bearer " + localStorage.getItem("token"); // 要保证取到

    if (!this.$isEmpty(this.$route.params.adv_position_id)) {
      this.info.ap_id = this.$route.params.adv_position_id;
    }

    // 判断是否是编辑
    if (!this.$isEmpty(this.$route.params.id)) {
      this.edit_id = this.$route.params.id;
    }
  },
  mounted() {
    if (this.edit_id > 0) {
      this.get_adv_info();
    } else {
      this.get_adv_list();
    }
  },
};
</script>
<style lang="scss" scoped>
.line {
  text-align: center;
}
</style>